<template>
  <div class="box">
      <div class="boxcon">
        <div class="left">
          <img src="../../img/11.jpg" alt="">
      </div>
      <div class="right">
        <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 5 }"
    :wrapper-col="{ span: 20 }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
  <p style="font-size: 20px;">系统登录</p>
    <a-form-item
      label="账户"
      name="user"
      :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="formState.user"  />
    </a-form-item>

    <a-form-item
      label="密码"
      name="pass"
      :rules="[{ required: true, message: 'Please input your password!' }]"
    >
      <a-input-password v-model:value="formState.pass"  />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit" >登录</a-button>
      <p>
        <span>Or</span>
        <span @click="$router.push('/reg')">注册用户</span>
    </p>
    </a-form-item>
         </a-form>
      </div>  
      </div>
      
     
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import {useRouter} from "vue-router"
import axios from "../../utils/request"

interface FormState {
  user: string;
  pass: string;
}
const router=useRouter()
 const formState = reactive<FormState>({
      user: '',
      pass: '',
  });
    const onFinish =async (values: any) => {
      let res=await axios.post('/api/login',({...formState}))
      let {code,msg,token,data}=res.data;
      let res1=await axios.post("/api/ding",({token}))
      console.log(res1.data)
      if(res1.data.code===200){
        localStorage.setItem("token",token)
        router.push("/layout/")
      }else{
        alert('已锁定')
      }
    };

</script>

<style scoped lang='scss'>
.box{
    width: 100vw;
    height: 100vh;
    background: skyblue;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.boxcon{
    width:70vw;
    height: 70vh;
    background: white;
    display: flex;
}
.left{
    width: 50%;
    height: 70vh;
    background: orange;
    img{
        width: 100%;
        height: 100%;
    }
}
.right{
    width: 50%;
    height: 70vh;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: space-around;
}

</style>